<template>
  <div class="container page">
  <div class="search">
    <p class="left">
      <!-- <img src="https://www.rrjiaoyi.com/static/rr-min/home/index_icon_serach@3x.png" mode="widthFix"> -->
      <span>股票</span>
    </p>
    <p class="left">
      <img src="https://www.rrjiaoyi.com/static/rr-min/home/index_icon_serach@3x.png" mode="widthFix">
    </p>
    <!-- <input class="right" placeholder="搜索个股" focus="focus" /> -->
    <!-- <p class="right">搜索股票代码/名称</p> -->
    <input class="right" confirm-type="search" v-model="keyword" placeholder="搜索股票代码/名称" placeholder-class="placeholderStyle">
    <!-- <input class="right" confirm-type="search" v-model="keyword" placeholder="搜索股票代码/名称" placeholder-class="placeholderStyle" @confirm="confirm($event)"> -->
  </div>
  <p v-if="confirm.a" class="confirm"> {{ confirm.c + ' ' + confirm.a + ' ' + confirm.b}}</p>
  <p v-if="confirm.a" class="open" @click="open(confirm.a, confirm.b, confirm.c)">
    <img src="https://www.rrjiaoyi.com/static/rr-min/search/sy_bt_sousuo_@3x.png" mode="widthFix">
  </p>
  <div v-if="!keyword">
    <div class="history">
      <p>
        <img src="https://www.rrjiaoyi.com/static/rr-min/search/sy_wz_lsss@3x.png" mode="widthFix">
      </p>
      <p>
        <!-- <img src="https://www.rrjiaoyi.com/static/rr-min/search/sy_icon_sousuo@3x.png" mode="widthFix"> -->
      </p>
    </div>

    <div v-for="(history, index) in historyList" :key="index" @click="predict(history.stock_code, history.market, history.stock_name)">
      <div class="search-list">
        <p>{{ history.stock_name}}</p>
        <p>{{ history.stock_code }}</p>
      </div>
      <div class="img_bg">
        <img src="https://www.rrjiaoyi.com/static/rr-min/search/cb_bg_shine@3x.png" mode="widthFix">
      </div>
    </div>

  </div>
  <div v-else>
    <div :key="list" v-for="list of sList" @click="predict(list.stockCode, list.market, list.stockName)">
      <div class="search-list">
        <p>{{list.stockName}}</p>
        <p>{{list.stockCode}}</p>
      </div>
      <div class="img_bg">
        <img src="https://www.rrjiaoyi.com/static/rr-min/search/cb_bg_shine@3x.png" mode="widthFix">
      </div>
    </div>
  </div>
  <!-- <input bindinput="bindKeyInput" placeholder="输入同步到view中" /> -->
  <!-- <div class="right">
    <p bindtap="bindButtonTap">测吧</p>
  </div> -->
    <!-- <div class="img_two">
      <img src="https://www.rrjiaoyi.com/static/rr-min/home/index_wz_sousuo@3x.png" mode="widthFix">
    </div> -->

  </div>
</template>
<script>
import qcloud from 'wafer2-client-sdk'
import YearProgress from '@/components/YearProgress'
import {showSuccess, showModal} from '@/util'
import {get, post} from '@/util'
import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
  components: {
    YearProgress
  },
  data () {
    return {
      historyList: [],
      focus: true,
      inputValue: '',
      keyword: '',
      sList: [],
      confirm: {'c': '', 'a': '', 'b': ''}
    }
  },
  watch:{
    'keyword':function () {
      this.searchList(this.keyword).then(result => {
        // console.log('222222222', result.datas);
        this.sList = result.datas
        if(result.code === -1 && this.keyword !== '') {
          wx.showToast({
            title: '没有匹配结果！',
            icon: 'none',
            duration: 1000
          })
        }
      });
    }
  },
  // bindKeyInput(e) {
  //   this.setData({
  //     inputValue: e.detail.value
  //   })
  //   console.log('111', this.inputValue)
  // },
  mounted () {
    // this.userinfo = wx.getStorageSync('userinfo')
    
      // console.log('1111', openid);

    // this.bookid = this.$root.$mp.query.id

    // this.demo().then(result => {
    // console.log('demo', result.data);
    // });
    
    // this.joke().then(result => {
    // console.log('joke', result.data.data.msg);
    // });

    // this.player().then(result => {
    //   this.playerRank = result
    //   console.log('joke', result);
    // });

    // this.searchList().then(result => {
    //   console.log('222222222', result);
    // });

  },
  onShareAppMessage() {
    return {
      title: `${wx.getStorageSync('userinfo').nickName}邀请你使用测股吧`,
      path: `/pages/me/main`
    }
  },
  methods: {
    // 开启
    open(a, b, c) {
      let openid = wx.getStorageSync('userinfo').openId
      post2('times_check', {'openid': openid, 'stock_code': a, 'market': b, 'stock_name': c}).then(result => {
      // console.log('open', result);
      if(result.code === 0) {
        wx.showToast({
          title: '已花费一次机会',
          icon: 'none',
          duration: 1000
        })
        setTimeout(() => {
          wx.switchTab({
            url: `/pages/predict/main`
          })
        }, 500)
      } else if(result.code === 1) {
          wx.showToast({
            title: '今日已经测过该股不消耗机会',
            icon: 'none',
            duration: 1000
          })
          setTimeout(() => {
            wx.switchTab({
              url: `/pages/predict/main`
            })
          }, 500)
      } else {
        wx.showToast({
          title: '今日2次机会已用完,群成员可共享机会',
          icon: 'none',
          duration: 1000
        })
      }
    });

    },
    // 确认
    predict(a, b, c) {
      // console.log(a + b + c)
      // this.keyword = `${c}`
      this.confirm = {'a':a, 'b':b, 'c':c}
      //  wx.navigateTo({
      //   url: '/pages/search/main'
      // })
    },
    confirm(e) {
      // console.log(e)
    },
    // 搜索历史
    async history(openid) {
      return await post2('search_history', {'openid': openid})
    },
    // 忽略
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    //  搜索列表
    async searchList(keyword) {
      return await post2('search_key', {'keyword': keyword})
    },
    async demo() {
    // return await get2('demo', {})
    },
    async joke() {
      return await get2('api/jokes', {})
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    },
    loginSuccess (res) {
      showSuccess('登录成功')
      wx.setStorageSync('userinfo', res)
      this.userinfo = res
    }

  },
  onShow () {
    Object.assign(this.$data, this.$options.data())

    // 历史
    // let openid = wx.getStorageSync('userinfo').openId
    this.history(wx.getStorageSync('userinfo').openId).then(result => {
      // console.log('hhhhhhhhhh', result.record);
      this.historyList = result.record
    });
    // let userinfo = wx.getStorageSync('userinfo')
    // console.log([userinfo])
    // if (userinfo) {
    //   this.userinfo = userinfo
    // }
    // console.log(this.userinfo)
  }
}
</script>

<style lang='scss'>
.container{
  font-size: 30rpx;
  color: white;
  // background-color: #070d1b;
  // width: 100%;
  // line-height: 100%;
  // opacity: 0.7;
}
page {
  background-color: #090f1d;
  // background-color: #070d1b;
  // background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  // background-image: url("https://www.rrjiaoyi.com/static/rr-min/common/bg@3x.png");
  width: 100%;
  height: 100%;
}
.section {
  text-align: center;
  margin-top: 200rpx;
  padding: 0 100rpx;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
  // .left {
  //   border-radius: 50px 0 0 50px;
  //   border: 1rpx solid  rgb(62, 207, 221);
  //   flex: 5;
  //   height: 80rpx;
  //   line-height: 80rpx;
  //   input {
  //     height: 80rpx;
  //     line-height: 80rpx;
  //   }
  // }
  // .right {
  //   border-radius: 0 50px 50px 0;
  //   border: 1rpx solid  rgb(62, 207, 221);
  //   background-color: rgb(62, 207, 221);
  //   flex: 2;
  //   height: 80rpx;
  //   line-height: 80rpx;
  // }
}
.search {
  text-align: center;
  margin: 0 100rpx;
  margin-top: 50rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 50px;
  border: 1rpx solid  rgb(62, 207, 221);
  display: flex;
  input {
    height: 80rpx;
    line-height: 80rpx;
  }
  .left {
    flex: 2;
    height: 80rpx;
    line-height: 80rpx;
    span {
      padding: 0 20rpx;
      color: rgb(45, 161, 187);
      border-right: 1rpx solid  rgb(62, 207, 221);      
    }
    image {
      // width: 50%;
      margin-top: 20rpx;
      height: 40rpx;
      width: 40rpx;
    }
  }
  .right {
    flex: 5;
    text-align: left;
    color: rgb(45, 161, 187);
    .placeholderStyle {
      color: rgb(45, 161, 187);
    }
  }
}
.img_one{
  // margin: 100rpx;
  // height: 100rpx;
  margin-top: 350rpx;
  text-align: center;
  img {
    width: 40%;
  }
}
.img_two{
  // margin: 100rpx;
  // height: 100rpx;
  // text-align: center;
  margin-top: 20rpx;
  margin-left: 100rpx;
  img {
    width: 30%;
  }
}
.recomond {
  display: flex;
  align-items: center;
  margin: 20rpx;
  p {
    text-align: center;
    flex: 1;
    margin: 20rpx;
  }
}
.foot {
  color: rgb(45, 161, 187);
  text-align: center;
  margin-top: 200rpx;
}
.open {
  text-align: center;
  img {
    width: 60%;
  }
}
.history {
  display: flex;
  text-align: center; 
  margin-top: 70rpx;
  margin-bottom: 50rpx;
  >p:nth-child(1) {
    flex: 1;
    img {
      width: 150rpx;
    }
  }
  >p:nth-child(2) {
    flex: 1;
    img {
      width: 100rpx;
    }
  }
}
.img_bg {
  // margin-bottom: -10rpx;
  text-align: center;
  img {
    width: 90%;
  }
}
.search-list {
  display: flex;
  text-align: center;
  padding-top: 30rpx;
  p {
    flex: 1;
    color: rgb(45, 161, 187);
  }
}
.confirm {
  margin-top: 100rpx;
  color: rgb(45, 161, 187);
  text-align: center;
}
</style>
